<template>
  <div>
    <div style="margin: 10px 0; background-color: #fff; border-radius: 10px; padding: 20px">
      <div class="message-title">留言板</div>
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="留言内容" prop="content">
          <el-input type="textarea" v-model="form.content" :rows="4" placeholder="请输入您的留言内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交留言</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin: 20px 0; background-color: #fff; border-radius: 10px; padding: 20px">
      <div class="message-list-title">留言列表</div>
      <div v-if="messages.length === 0" style="text-align: center; color: #909399; margin: 20px 0;">暂无留言</div>
      <el-card v-for="(item, index) in messages" :key="index" class="message-card">
        <div class="message-header">
          <span class="message-user">{{ item.user }}</span>
          <span class="message-time">{{ item.time }}</span>
        </div>
        <div class="message-content">{{ item.content }}</div>
        <div v-if="item.reply" class="message-reply">
          <div class="reply-header">
            <span class="reply-title">管理员回复：</span>
            <span class="reply-time">{{ item.replyTime }}</span>
          </div>
          <div class="reply-content">{{ item.reply }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageBoard",
  data() {
    return {
      form: {
        content: ""
      },
      rules: {
        content: [
          { required: true, message: "请输入留言内容", trigger: "blur" },
          { min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur" }
        ]
      },
      messages: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    };
  },
  created() {
    this.loadMessages();
  },
  methods: {
    loadMessages() {
      this.request.get("/message/front").then(res => {
        if (res.code === "200") {
          this.messages = res.data;
        }
      });
    },
    submit() {
      if (!this.user.id) {
        this.$message.warning("请先登录后再留言");
        return;
      }

      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.request.post("/message", this.form).then(res => {
            if (res.code === "200") {
              this.$message.success("留言成功");
              this.form.content = "";
              this.loadMessages();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.message-title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
  font-weight: bold;
}

.message-list-title {
  font-size: 20px;
  color: #303133;
  margin-bottom: 20px;
  font-weight: bold;
}

.message-card {
  margin-bottom: 15px;
}

.message-header {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.message-user {
  font-weight: bold;
  color: #409EFF;
}

.message-time {
  color: #909399;
  font-size: 14px;
}

.message-content {
  color: #606266;
  padding: 10px 0;
  border-bottom: 1px dashed #EBEEF5;
  white-space: pre-wrap;
  word-break: break-all;
}

.message-reply {
  background-color: #F2F6FC;
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.reply-title {
  font-weight: bold;
  color: #F56C6C;
}

.reply-time {
  color: #909399;
  font-size: 14px;
}

.reply-content {
  color: #606266;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>